<template>
    <!-- 可以复制登录组件代码，修改为注册表单 -->
    <div class="fullscreen-login">
      <!-- 保持相同的背景样式 -->
      <div class="background-layer">
        <div class="particles"></div>
        <div class="gradient-overlay"></div>
      </div>
  
      <div class="login-content">
        <div class="brand-section">
          <h1 class="app-name">Flexi - Creat</h1>
          <p class="slogan">开启全新旅程</p>
        </div>
  
        <!-- 注册表单 -->
        <form @submit.prevent="handleRegister" class="login-form">
          <!-- 添加需要的注册字段 -->

          <div class="form-group">
            <label for="username" class="input-label">
                <svg class="icon">
                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                </svg>
                账号
            </label>
            <input 
                type="text" 
                id="username" 
                v-model="username"
                required
                class="floating-input"
            />
          </div>
          <div class="form-group">
            <label for="password" class="input-label">
                <svg class="icon">
                <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
                </svg>
                密码
            </label>
            <input
                type="password"
                id="password"
                v-model="password"
                required
                class="floating-input"
            />
          </div>
          <div class="form-group">
            <label for="password" class="input-label">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 1.5l-8 6-8-6h16zM4 18h16v-8l-8 6-8-6v8z"/>
                </svg>
                邮箱
            </label>
            <input
                type="email"
                id="email"
                v-model="email"
                required
                class="floating-input"
            />
          </div>
          
          <!-- 保留原有用户名密码字段 -->
          
          <div class="button-container">
            <button type="submit" class="glow-button">注册</button>
            <button 
              type="button" 
              class="glow-button"
              @click="router.push('/login')"
            >
              返回登录
            </button>
          </div>
        </form>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  const username = ref('');
  const password = ref('');
  const email = ref('');
  const errorMessage = ref('');
  import axios from 'axios'; // 引入 axios

  const apiClient = axios.create({
    baseURL: 'http://localhost:8088/lrapi', // 统一基础URL
    timeout: 10000, // 设置超时时间
  });

  const router = useRouter()
  const handleRegister = async () => {
    try {

      const response = await apiClient.post('/login', {
          username: username.value,
          email: email.value,
          password: password.value,
        })
        .then(response => {
          alert(data.message); // 登录成功提示
          router.push('/login'); // 跳转主页
        });
      } catch (error) {// 处理网络错误或服务器异常
        if (error.response) {// 服务器返回了错误状态码
          errorMessage.value = `错误 ${error.response.status}: ${error.response.data.message}`;
        } else if (error.request) {// 请求已发出但无响应
          errorMessage.value = '网络连接失败，请检查网络';
        } else {// 其他错误
          errorMessage.value = `请求错误: ${error.message}`;
        }
        console.error('Login error:', error);
      }
    //     const response = await fetch('http://localhost:8088/api/register', {
    //     method: 'POST',
    //     headers: {
    //         'Content-Type': 'application/json',
    //     },
    //     body: JSON.stringify({
    //         username: username.value,
    //         password: password.value,
    //         email: email.value,
    //     }),
    //     });

    //     if (response.ok) {
    //     const message = await response.text();
    //     alert(message); // 登录成功提示
    //     // 可以在这里执行后续操作，例如导航到另一个页面
    //     } else {
    //     const errorText = await response.text();
    //     errorMessage.value = errorText; // 显示错误信息
    //     }
    // } catch (error) {
    //     console.error('Error:', error);
    //     errorMessage.value = '注册请求失败，请稍后再试。';
    // }
  }
  </script>


<style scoped>
.button-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.fullscreen-login {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 2;
}

.background-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
  animation: particleAnim 20s linear infinite;
}

.gradient-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, 
    rgba(102, 126, 234, 0.2) 0%,
    rgba(118, 75, 162, 0.2) 100%
  );
}

.login-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 2rem;
  color: white;
  z-index: 1;
}

.brand-section {
  text-align: center;
  margin-bottom: 3rem;
  animation: fadeInUp 1s ease;
}

.app-name {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  letter-spacing: 2px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.slogan {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.8);
}

.login-form {
  width: 100%;
  max-width: 400px;
  animation: fadeIn 1s ease;
}

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.floating-input {
  width: 80%;
  padding: 1.2rem 1.2rem 1.2rem 5.5rem; /* 增加左内边距为图标腾出空间 */
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: white;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.floating-input:focus {
  outline: none;
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

.input-label {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.6);
  pointer-events: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 1; /* 确保图标显示在输入框之上 */
}

.icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.floating-input:focus ~ .input-label,
.floating-input:not(:placeholder-shown) ~ .input-label {
  top: -10px;
  font-size: 0.875rem;
  color: #667eea;
}

.glow-button {
  position: relative;
  width: 60%;
  padding: 1.2rem;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

.glow-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(118, 75, 162, 0.4);
}

.hover-effect {
  position: absolute;
  background: rgba(255,255,255,0.1);
  width: 50px;
  height: 100%;
  left: -50px;
  top: 0;
  transform: skewX(-30deg);
  transition: left 0.3s ease;
}

.glow-button:hover .hover-effect {
  left: 110%;
}

.error-message {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(255, 87, 87, 0.15);
  border: 1px solid #ff5757;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  backdrop-filter: blur(5px);
}

.warning-icon {
  width: 24px;
  height: 24px;
  fill: #ff5757;
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes particleAnim {
  from { background-position: 0 0 }
  to { background-position: 100% 100% }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px) }
  to { opacity: 1; transform: translateY(0) }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px) }
  to { opacity: 1; transform: translateY(0) }
}

@media (max-width: 768px) {
  .app-name {
    font-size: 2rem;
  }
  
  .slogan {
    font-size: 1rem;
  }
}
</style>